<template>
	<view>
		<view class="display-ce align-items top_money">
			<view class="text-align-center">
				<view class="fontSize-58 col-f">{{yu_money}}</view>
				<view class="fontSize-30 mar-top-8 col-f">可提现金额(元)</view>
			</view>
		</view>
		<view class="pad-lr-30 mar-top-30">
			<view class="bgfff radius-20 pad-lr-30 pad-tb-40">
				<view class="fontSize-28">提现金额</view>
				<!-- <view class="display align-items-end pad-tb-40">
					<text class="fontSize-48">￥</text>
					<input type="number" placeholder="请输入提现金额" v-model="money" class="ml16 width-85" />
				</view> -->
				<view class="display align-items flex-wrap">
					<view class="display-ce align-items money_view radius-10" :class="current==item.key?'active':'border6'" v-for="item in money_config" :key="item" @click="change(item.key)">
						￥{{item.key}}
					</view>
				</view>
			</view>
			<view class="mar-top-40 tixianbtn text-align-center radius-10 fontSize-32 col-f" @click="_subWithdraw">
				立即提现
			</view>
			<view class="mar-top-30 jilubtn text-align-center radius-10 fontSize-32" @click="gorecords">
				提现记录
			</view>
		</view>
		<!-- 提示框 -->
		<tm-overlay v-model:show="showWin" contentAnimation>
			<view @click.stop="">
				<view class="popup_view radius-20 bgfff text-align-center pad-tb-40">
					<view class="fontSize-40">友情提示</view>
					<view class="mar-top-40 col-6">{{msgtitle}}</view>
					<view class="col-f text-align-center qry_btn radius-10" @click="showWin = false">
						确认
					</view>
				</view>
			</view>
		</tm-overlay>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {withdrawPage,subWithdraw} from '../../utils/api'
const showWin = ref(false)
const msgtitle = ref()
onLoad(()=>{
	_withdrawPage()
})
const yu_money = ref(0)//余额 
const money_config = ref(0)//提现金额列表
const current = ref(0)
const _withdrawPage =() =>{
	withdrawPage().then(res=>{
		if(res.code==1){
			yu_money.value = res.data.user.money
			money_config.value = res.data.money_config
		}
	})
}
const change =(key) =>{
	current.value = key
}
const _subWithdraw =() =>{
	subWithdraw({money:current.value}).then(res=>{
		
		if(res.code==1){
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}else if(res.code==3){
			showWin.value = true
			msgtitle.value = res.msg
		}else{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	})
}
const gorecords =() =>{
	uni.navigateTo({
		url:'/mypages/records/records'
	})
}
</script>

<style lang="scss">
page{
	background-color: #F7F7F7;
}
.top_money{
	height: 200rpx;
	background: #FD6317;
}
.tixianbtn{
	height: 88rpx;
	background: #FD6317;
	line-height: 88rpx;
}
.jilubtn{
	height: 88rpx;
	border: 1px solid #FD6317;
	color: #FD6317;
	line-height: 88rpx;
}
.popup_view{
	width: 600rpx;
	.qry_btn{
		width: 260rpx;
		height: 80rpx;
		background: #FD6317;
		margin: 80rpx auto 0 auto;
		line-height: 80rpx;
	}
}
.border6{
	border: 2rpx solid #c7c7c7;
}
.active{
	border: 2rpx solid #FD6317;
	color: #FD6317;
}
.money_view{
	width: 180rpx;
	margin: 20rpx 10rpx;
	height: 100rpx;
}
</style>
